什麼是事件？

在網頁中，事件 是使用者與網頁互動時發生的事情，例如點擊按鈕、滑鼠移動、按下鍵盤、捲動頁面等。JavaScript 提供了強大的事件處理機制，讓開發者可以根據這些事件來觸發特定的行為。

常見的事件類型
1.滑鼠事件：

• click: 使用者點擊元素時觸發。

• mouseover: 滑鼠懸停在元素上時觸發。

• mouseout: 滑鼠離開元素時觸發。
  2.鍵盤事件：

• keydown: 按下鍵盤按鍵時觸發。

• keyup: 放開鍵盤按鍵時觸發。
  3.表單事件：

• submit: 表單提交時觸發。

• change: 表單中的輸入內容改變時觸發。
  4.視窗事件：

• resize: 當視窗大小改變時觸發。

• scroll: 當使用者捲動頁面時觸發。

如何處理事件

在 JavaScript 中，我們可以透過 addEventListener() 方法為網頁元素添加事件監聽器，讓指定的事件發生時觸發程式碼。

舉例：點擊事件處理
假設我們有一個按鈕，當使用者點擊它時，會顯示一個訊息，以下是程式碼：

<button id="myButton">點擊我</button>
<p id="message"></p>

<script>
    const button = document.getElementById("myButton");
    const message = document.getElementById("message");

    button.addEventListener("click", function() {
        message.textContent = "你剛剛點擊了按鈕！";
    });
</script>

說明：我使用 *addEventListener() *為按鈕綁定了 click 事件。當按鈕被點擊時，段落的內容將被修改。

事件對象與事件傳遞
每個事件都會伴隨一個 事件對象 (event object)，它包含了有關事件的各種信息，例如觸發事件的元素、事件類型、滑鼠座標等。

舉例：使用事件對象

<button id="logButton">顯示滑鼠座標</button>

<script>
    const logButton = document.getElementById("logButton");

    logButton.addEventListener("click", function(event) {
        console.log("滑鼠位置：", event.clientX, event.clientY);
    });
</script>

在這裡，點擊按鈕時，會在瀏覽器的控制台顯示滑鼠點擊時的座標位置。

事件傳遞機制
事件傳遞有三個階段：

• 捕獲階段：事件從根元素往子元素傳遞。
• 目標階段：事件到達目標元素。
• 冒泡階段：事件從目標元素往上傳遞到根元素。
  指定事件在「捕獲」或「冒泡」階段觸發。默認情況下，事件是在冒泡階段處理的。

舉例：阻止事件冒泡

<div id="outerDiv">
    <button id="innerButton">內部按鈕</button>
</div>

<script>
    const outerDiv = document.getElementById("outerDiv");
    const innerButton = document.getElementById("innerButton");

    outerDiv.addEventListener("click", function() {
        console.log("外部 div 被點擊");
    });

    innerButton.addEventListener("click", function(event) {
        console.log("內部按鈕被點擊");
        event.stopPropagation(); // 阻止事件冒泡
    });
</script>

在這段程式碼中，按下內部按鈕時，內部的事件處理器會執行，並且透過 event.stopPropagation() 阻止事件向外部傳播，因此不會觸發外部 div 的點擊事件。

總結

事件處理是 JavaScript 中強大且重要的功能之一，讓網頁可以根據使用者的行為做出回應。今天我學習了如何使用 addEventListener() 綁定事件、事件對象的使用，以及事件傳遞機制。

接下來，我會學習深入探討如何處理更複雜的事件，以及如何組織大型應用程式中的事件處理邏輯。